<template>
	<view class="mailList"  :class="APPTheme">
		<uni-nav-bar fixed status-bar left-icon="back"  :title="title" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickLeft="$lizhao.lznavigate.lzNavigateBack()"></uni-nav-bar>
		<view class="top">
			<view class="example-body">
				<uni-search-bar radius="100" class="uni-search-bar" clearButton="always" placeholder="关键词" @confirm="search" @input="input"
				 @cancel="cancel" />
			</view>
			<view class="addressBook">
				<scroll-view  scroll-x="true" >
					<view class="scroll-view_H">
						<view class="scroll-item"><view  @click="MailList({key:''},0)">通讯录</view></view>
						<view class="scroll-item" v-for="(item,index) in org.departmentsParen" :key="index"><uni-icons type="arrowright" color="#8f8f94" size="14" class="uni-icons" /><view  @click="MailList(item,1)">{{item.roleName}}</view></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="ul">
			<view class="org-list-item" v-for="(item,index) in org.departments" :key="index">
				<view class="li theme-bg-active">
					<view class="label"><view class="wenjianjia"></view> {{item.roleName}}</view>
					<view class="iconfont icon-xiaji" @click.stop="subordinate(item)">下级</view>
				</view>
			</view>
		</view>
		<u-cell-group class="theme-bg" :border="false">
			<u-cell-item :title="item.name" hover-class="theme-bg-active" title-width="600" v-for="(item,index) in org.departmentsList" :key="index" @click="navigetTo(item)">
				<u-avatar slot="icon" :src="item.photo?item.photo:''" size="60" style="margin-right: 5px;"></u-avatar>
			</u-cell-item>
		</u-cell-group>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		computed:{
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		data() {
			return {
				onoff:false,//防止多次请求
				title:'角色通讯录',
				searchValue:"",//搜索值
				departmentId: '', //父级组织id,如果为null,则查询根节点公司id下的通讯录(部门列表+员工列表)信息
				// 组织
				org:{
					departments: [], //组织列表
					departmentsList: [], //组织下的人员
					departmentsParen: [], //组织面包屑
				}
			}
		},
		onLoad(e) {
			that=this
			this.getOrganizationalToApplicationForm()
		},
		onShow() {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		methods: {
			//跳转用户详情页
			navigetTo(item){
				uni.navigateTo({
					url: '../userInfo/userInfo?userId='+item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//获取角色列表
			getOrganizationalToApplicationForm() {
				return new Promise((reslove,reject)=>{
					that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_findUserByRoleId, {
						id: that.departmentId,
						keyword: that.searchValue
					}, function(res) {
						console.log(res);
						if (res.code =='0'&&res.data) {
							try{
								if(that.departmentId||that.searchValue){
									that.org.departments=[]
									that.org.departmentsList = res.data
								}else{
									that.org.departmentsList=[]
									//获取的部门
									that.org.departments = res.data
								}
							}catch(e){
								that.org.departments = []
							}
							
							reslove('成功')
						}
					});
				})
			},
			//点击通讯录
			MailList(item, type) {
				console.log(item, type);
				that.departmentId = item.id
				that.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
				if (type == 1) {
					that.org.departmentsParen.forEach((res, index) => {
						if (item.id == res.id) {
							that.org.departmentsParen = that.org.departmentsParen.slice(0, index + 1)
						}
					})
				} else {
					that.org.departmentsParen = []
				}
			
			},
			//下级
			async subordinate(item) {
				console.log(item);
				if(!that.onoff&&!item.checked){//防止多次点击
					that.onoff=true
					that.departmentId = item.id
					let res=await that.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
					if(res=='成功'){
						that.org.departmentsParen.push(item)
						that.onoff=false
					}
				}
				
			},
			//搜索
			search(res) {
				this.searchValue=res.value
				this.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
			},
			input(res) {
				this.searchValue=res.value
				this.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
			},
			cancel(res) {
				this.searchValue=''
				this.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	@import '../OrgAddressBook/OrgAddressBook.scss';
</style>
